<template>
    <div class="container" style="width:99%;margin-top:-25px;">
        <!-- 查询条件 -->
        <div class="query-box">
            <el-form :model="ResetFrom" status-icon ref="ResetFrom">
                <el-row>
                    <el-col :span="4">
                        <!-- <el-form-item label="" prop="userName">
                <el-input v-model="ResetFrom.userName" placeholder="请输入用户名">
                    <template slot="prepend">用户名</template>
                </el-input>
                        </el-form-item>-->
                        <!-- <div class="depart-box">
                <div class="slect-title">用户名</div>
                <el-autocomplete
                  v-model="ResetFrom.userName"
                  :fetch-suggestions="querySearchAsync"
                  placeholder="请输入内容"
                  @select="handleSelect"
                  
                ></el-autocomplete>
                        </div>-->
                        <div class="depart-box">
                            <div class="slect-title">用户名</div>
                            <el-form-item prop="threeLevelDepartment">
                                <el-select clearable v-model="ResetFrom.userName" filterable>
                                    <el-option
                                        v-for="item in userList"
                                        :key="item.id"
                                        :label="item.userName"
                                        :value="item.userName"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <!-- <el-form-item label="" prop="realName">
                <el-input v-model="ResetFrom.realName" placeholder="请输入真实姓名">
                    <template slot="prepend">真实姓名</template>
                </el-input>
                        </el-form-item>-->
                        <div class="depart-box">
                            <div class="slect-title">真实姓名</div>
                            <el-form-item prop="threeLevelDepartment">
                                <el-select clearable v-model="ResetFrom.realName" filterable>
                                    <el-option
                                        v-for="item in userList"
                                        :key="item.id"
                                        :label="item.realName"
                                        :value="item.realName"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <!-- <el-col :span="4">
                        <el-form-item label prop="phone">
                            <el-input v-model="ResetFrom.stuPhone" placeholder="请输入电话">
                                <template slot="prepend">联系电话</template>
                            </el-input>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="4">
                        <div class="depart-box">
                            <div class="slect-title">三级部门</div>
                            <el-form-item prop="threeLevelDepartment">
                                <el-select
                                    clearable
                                    v-model="ResetFrom.threeDeptId"
                                    @change="departmentSetValue"
                                    filterable
                                >
                                    <el-option
                                        v-for="item in threeDept"
                                        :key="item.id"
                                        :label="item.deptName"
                                        :value="item.id"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="7">
                        <div class="depart-box">
                            <div class="slect-title">流转时间</div>
                            <el-date-picker
                                v-model="EstablishTime"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :default-time="['00:00:00', '23:59:59']"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                format="yyyy-MM-dd HH:mm:ss"
                            ></el-date-picker>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <div class="from-btns">
                <kt-button
                    :label="$t('action.reset')"
                    perms="true"
                    type="primary"
                    @click="reset('ResetFrom')"
                />
                <kt-button
                    :label="$t('action.search')"
                    perms="true"
                    type="primary"
                    @click="search"
                />
            </div>
        </div>
        <div class="fl" v-loading="loading">
            <p style="margin-left:20px">
                流转资源总量共计：
                <span class="red">{{totalCount?totalCount:'0'}}</span>个，其中A类
                <span class="red">{{countA?countA:'0'}}</span>个，B+类
                <span class="red">{{countB?countB:'0'}}</span>个，B-类：
                <span class="red">{{countB1?countB1:'0'}}</span>个，C类：
                <span class="red">{{countC?countC:'0'}}</span>个
            </p>
        </div>
        <!--表格内容栏-->
        <StTable
            class="table-width"
            :showBatchDelete="false"
            :loading="loading"
            @handleCellClick="handleCellClick"
            :data="pageResult"
            :columns="columns"
            @findPage="findPage"
        ></StTable>
    </div>
</template>
<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import KtButton from "@/views/Core/KtButton";
import StTable from "@/views/Core/StTable";
import api from "@/http/api";
import CrmSwitch from "@/views/Core/CrmSwitch";
import axios from "axios";
import { baseUrl } from "@/utils/global";
import Cookies from "js-cookie";
export default {
    name: "Student",
    components: {
        PopupTreeInput,
        StTable,
        KtButton,
        CrmSwitch
    },
    data() {
        return {
            size: "small",
            filters: {
                name: ""
            },
            pageResult: {
                content: []
            },
            // 查询条件
            ResetFrom: {
                userName: "",
                userid: "",
                realName: "",
                phone: "",
                DateTime: "",
                dateEnd: "",
                dateStart: "",
                pageNum: 0,
                pageSize: 0,
                listUserId: []
            },
            EstablishTime: [],
            threeDept: "",
            columns: [
                { type: "index", label: "序号", minWidth: 50 },
                { prop: "userName", label: "用户名", minWidth: 80 },
                { prop: "realName", label: "真实姓名", minWidth: 80 },
                { prop: "phone", label: "联系电话", minWidth: 80 },
                { prop: "threeDeptName", label: "三级部门", minWidth: 80 },
                {
                    prop: "recycleTotalSum",
                    label: "资源流转总量",
                    minWidth: 80,
                    formatter: (row, column, cellValue, index) => {
                        return (
                            <a class="recycleTotalSum">{row.recycleTotalSum}</a>
                        );
                    }
                },
                {
                    prop: "recycleASum",
                    label: "A类",
                    minWidth: 80,
                    formatter: (row, column, cellValue, index) => {
                        return <a class="recycleTotalSum">{row.recycleASum}</a>;
                    }
                },
                {
                    prop: "recycleBSum",
                    label: "B+类",
                    minWidth: 80,
                    formatter: (row, column, cellValue, index) => {
                        return <a class="recycleTotalSum">{row.recycleBSum}</a>;
                    }
                },
                {
                    prop: "recycleB1Sum",
                    label: "B-类",
                    minWidth: 80,
                    formatter: (row, column, cellValue, index) => {
                        return <a class="recycleTotalSum">{row.recycleB1Sum}</a>;
                    }
                },
                {
                    prop: "recycleCSum",
                    label: "C类",
                    minWidth: 80,
                    formatter: (row, column, cellValue, index) => {
                        return <a class="recycleTotalSum">{row.recycleCSum}</a>;
                    }
                }
            ],

            pageRequest: { pageNum: 1, pageSize: 30 },
            deptId: Cookies.get("threeLevelDeptId"),
            loading: false, // 加载标识
            userList: [],
            totalCount: "",
            countA: "",
            countB: "",
            countB1: "",
            countC: "",
            studentType: []
        };
    },
    methods: {
        // 获取分页数据
        findPage: function(data) {
            if (data !== null) {
                this.loading = true;
                this.pageRequest = data.pageRequest;
            }

            this.ResetFrom.pageSize = this.pageRequest.pageSize;
            this.ResetFrom.pageNum = this.pageRequest.pageNum;
            this.getStudentType();
            this.$api.student
                .studentRecycleDetailInfo(this.ResetFrom)
                .then(res => {
                    this.getTotal()
                    //以下3个返回参数，需要根据自己业务去判断，处理返回信息
                    let result = res.result; //执行结果
                    let errorCode = res.errorCode; //错误编码
                    let msg = res.msg; //返回消息

                    let content = { content: res.data, totalSize: res.total };
                    this.pageResult = content;
                    this.loading = false;
                    //this.findUserRoles();
                })
                .then(data != null ? data.callback : "");
        },
        // 加载用户角色信息
        findUserRoles: function() {
            this.$api.role.findAll().then(res => {
                // 加载角色集合
                this.roles = res.data;
            });
        },
        //三级部门改变时，给对应的三级部门ID的参数赋值
        departmentSetValue: function(selVal) {
            // this.ResetFrom.threeLevelDepartment = selVal;
        },
        // 获取学生客户类型
        getStudentType() {
            this.$api.user
                .optionsList({
                    codeType: "student_type"
                })
                .then(res => {
                    if (res.result == 2) {
                        this.$message({ message: res.msg, type: "error" });
                    } else {
                        this.studentType = res.keyValueList;
                    }
                });
        },
        // 获取部门列表
        findDeptTree: function() {
            this.$api.dept.findDeptTree().then(res => {
                this.deptData = res.data;
            });
            // this.$api.user
            // .optionsList({
            //     codeType:'student_type'
            // })
            // .then(res => {
            //     if (res.result == 2) {
            //         this.$message({ message: res.msg, type: 'error' });
            //     } else {
            //         this.studentType=res.keyValueList
            //     }
            // });
        },
        // 菜单树选中
        deptTreeCurrentChangeHandle(data, node) {
            this.dataForm.deptId = data.id;
            this.dataForm.deptName = data.name;
        },
        // 菜单树选中
        handleOptionClick() {},
        // 重置
        reset(ResetFrom) {
            this.$refs.ResetFrom.resetFields();
            this.EstablishTime = "";
            this.ResetFrom.userName = "";
            this.ResetFrom.realName = "";
            this.ResetFrom.stuPhone = "";
            this.ResetFrom.threeDeptId = "";
            this.ResetFrom.recycleStartDate = "";
            this.ResetFrom.recycleEndDate=""
            this.pageRequest.pageNum = 1;
            this.findPage(null);
        },
        // 查询
        search() {
            this.ResetFrom.recycleStartDate = this.EstablishTime[0];
            this.ResetFrom.recycleEndDate = this.EstablishTime[1];
            this.loading = true;
            this.pageRequest.pageNum = 1;
            this.findPage(null);
        },
        // 获取三级部门
        get_dept_data() {
            this.$api.dropdown.deptLevel3({ deptType: 1 }).then(res => {
                this.threeDept = res.departmentInfoList;
            });
        },
        // 获取用户名
        get_user_name() {
            this.$api.dropdown.users({ userType: 3, deptType: 1 }).then(res => {
                if (res.result == 1) {
                    this.userList = res.userInfoList;
                }
            });
        },
        // 获取总量
        getTotal(){
          this.$api.student.queryRecycleDetailCountInfo(this.ResetFrom).then(res => {
              if (res.result == 2) {
                  this.$message({ message: res.msg, type: "error" });
              } else {
                  this.totalCount = res.data.totalCount;
                  this.countA = res.data.countA;
                  this.countB = res.data.countB;
                  this.countB1 = res.data.countB1;
                  this.countC = res.data.countC;
              }
          });
        },
        // 用户名
        querySearchAsync(queryString, callback) {
            let restaurants = [{}];
            let results = "";
            let threeId = JSON.parse(Cookies.get("threeLevelDeptId"));
            if (threeId == null) {
                this.$api.dropdown
                    .users({ userType: 3, deptType: 1 })
                    .then(res => {
                        for (let i of res.userInfoList) {
                            i.value = i.userName; //将想要展示的数据作为value
                        }
                        restaurants = res.userInfoList;
                        results = queryString
                            ? restaurants.filter(this.createFilter(queryString))
                            : restaurants;
                        callback(results);
                    });
            } else {
                this.$api.dropdown
                    .users({ userType: 3, deptType: 1 })
                    .then(res => {
                        for (let i of res.userInfoList) {
                            i.value = i.userName; //将想要展示的数据作为value
                        }
                        restaurants = res.userInfoList;
                        results = queryString
                            ? restaurants.filter(this.createFilter(queryString))
                            : restaurants;
                        callback(results);
                    });
            }
        },
        createFilter(queryString) {
            return restaurant => {
                return (
                    restaurant.userName
                        .toLowerCase()
                        .indexOf(queryString.toLowerCase()) === 0
                );
            };
        },
        handleSelect(item) {
            this.ResetFrom.userName = item.userName;
        },
        handleCellClick(row) {
            
            if (row.row.property == "recycleTotalSum") {
                this.$router.push({
                    path: "/ResourceMonitoring/RecycleDetailList",
                    query: {
                        userId: row.index.userId
                    }
                });
            }
            if (
                row.row.property == "recycleASum" ||
                row.row.property == "recycleBSum" ||
                row.row.property == "recycleB1Sum" ||
                row.row.property == "recycleCSum"
            ) {
                let stuType = "";
                this.studentType.forEach(item => {
                    if (row.row.label == item.value) {
                        stuType = item.key;
                    }
                });
                this.$router.push({
                    path: "/ResourceMonitoring/RecycleDetailList",
                    query: {
                        userId: row.index.userId,
                        stuType: stuType
                    }
                });
            }
        }
    },
    mounted() {
        this.findDeptTree();
        this.get_dept_data();
        this.get_user_name();
    }
};
</script>
<style >
@import url("../../assets/queryBox.css");
.red {
    color: red;
}
</style>
<style scope>
.recycleTotalSum {
    color: blue;
    cursor: pointer;
}
.add-btns .el-button:nth-child(1) {
    margin-right: 10px;
}
</style>

